<template>
  <a-card>
    <a-form layout="horizontal" :form="searchForm" @submit="handleSearch" autocomplete="off">
      <a-row type="flex" justify="start" :gutter="15">
        <a-col :md="2" :sm="24">
          <a-form-item>
            <a-select :options="orderHotelStatusArr" v-decorator="['orderStatus',{ initialValue: '' }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['orderId']" :placeholder="$t('order_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select :options="distributors" v-decorator="['distributor',{ initialValue: '' }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select :options="distributorStatusArr" v-decorator="['distributorOrderStatus',{ initialValue: '' }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['distributorOrderId']" :placeholder="$t('distributor_order_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select :options="suppliers" v-decorator="['supplier',{ initialValue: '' }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select :options="supplierStatusArr" v-decorator="['supplierOrderStatus',{ initialValue: '' }]"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['supplierOrderId']" :placeholder="$t('supplier_order_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" v-show="searchFormExpand" justify="start" :gutter="15">
        <a-col :md="2" :sm="24">
          <a-form-item>
            <a-select v-decorator="['dateType',{ initialValue: '1' }]">
              <a-select-option value="1">
                {{ $t('order_date') }}:
              </a-select-option>
              <a-select-option value="2">
                {{ $t('updated_date') }}:
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-range-picker @change="dateChange">
            </a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="2" :sm="24">
          <a-form-item>
            <a-select v-decorator="['dateType1',{ initialValue: '1' }]">
              <a-select-option value="1">
                {{ $t("checkin") }}:
              </a-select-option>
              <a-select-option value="2">
                {{ $t("checkout") }}:
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-range-picker @change="dateChange1">
            </a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-select v-decorator="['dateType2',{ initialValue: '1' }]">
              <a-select-option value="1">
                {{ $t("distributor") }}{{ $t("cancel_time_limit") }}:
              </a-select-option>
              <a-select-option value="2">
                {{ $t("supplier") }}{{ $t("cancel_time_limit") }}:
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-range-picker @change="dateChange2">
            </a-range-picker>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-checkbox v-decorator="['hasAfterSale', { valuePropName: 'checked', initialValue: false, },]">{{ $t('after_sale_order') }}</a-checkbox>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" v-show="searchFormExpand" justify="start" :gutter="15">
        <a-col :md="2" :sm="24">
          <a-form-item>
            <a-input v-decorator="['hotelId']" :placeholder="$t('hotel_id')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="4" :sm="24">
          <a-form-item>
            <a-input v-decorator="['hotelName']" :placeholder="$t('hotel_name')" :allowClear="true"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-auto-complete :data-source="countryList" v-decorator="['countryName']" :placeholder="$t('country')" :allowClear="true" :filter-option="filterOption"/>
          </a-form-item>
        </a-col>
        <a-col :md="3" :sm="24">
          <a-form-item>
            <a-input v-decorator="['cityName']" :placeholder="$t('city')" :allowClear="true"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row type="flex" justify="start" :gutter="15">
        <a-col :md="24" :sm="24" :style="{ textAlign: 'right' }">
          <a-form-item>
            <a-space>
              <a-button htmlType="submit" type="primary" icon="search">{{ $t('search') }}</a-button>
              <a-button type="primary" icon="export" v-show="false">{{ $t('export_list') }}</a-button>
              <a-button @click="handleReset">{{ $t("reset") }}</a-button>
              <a-button @click="toggleSearchForm" :icon="searchFormExpand ? 'up' : 'down'">{{ searchFormExpand?$t("collapse"):$t("more") }}</a-button>
              <a-popover title="其他列" placement="leftTop" v-model="visible" trigger="click" :overlayStyle="{width:'500px'}" v-show="false">
                <a-button type="primary" icon="setting" @click="setColumn"></a-button>
                <a-list :grid="{ gutter: 16, column: 3 }" size="small" :data-source="columns" slot="content">
                  <a-list-item slot="renderItem" slot-scope="item">
                    <a-checkbox v-model="item.visible">{{$t(item.slotName)}}</a-checkbox>
                  </a-list-item>
                </a-list>
              </a-popover>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-table size="small" :columns="columns" :data-source="data" :pagination="{ showSizeChanger: true, showQuickJumper: true, size:'middle', showTotal:(total, range) => `${range[0]}-${range[1]} / ${total}`, current: pageIndex, pageSize: pageSize, total: total, pageSizeOptions:['10','20','30','50','100','1000','2000'], }" :row-key="record => record.orderId + record.supplier + record.supplierOrderId" :loading="loading" @change="handleTableChange" :scroll="tableScroll">
      <template slot="orderId" slot-scope="text">
        <a @click="openOrder(text)">{{ text }}</a>
      </template>
      <template slot="orderStatus" slot-scope="text">
        <a-tag :color="text === 10 || text === -10 ? 'blue':'red'">{{ $t("order_status_arr." + text)}}</a-tag>
      </template>
      <template slot="selling_price" slot-scope="text, record">
        {{ record.currency }} {{ text }}
      </template>
      <template slot="distributor" slot-scope="text, record">
        <a @click="openDistributorHotel(record.distributor, record.hotelId)">{{ text }}</a>
      </template>
      <template slot="distributorOrderStatus" slot-scope="text">
        <a-tag :color="text === 10 || text === -10 ? 'blue':'red'">{{ $t("distributor_order_status_arr." + text)}}</a-tag>
      </template>
      <template slot="supplierOrderStatus" slot-scope="text">
        <a-tag :color="text === 10 || text === -10 ? 'blue':'red'">{{ $t("order_status_arr." + text)}}</a-tag>
      </template>
      <template slot="supplierPrice" slot-scope="text, record">
        {{ record.supplierCurrency }} {{ text }}
      </template>
      <template slot="roomName" slot-scope="text, record">
        {{ text }}<a v-show="record.roomCount > 1">{{ " X " + record.roomCount }}</a>
      </template>
      <template slot="mealType" slot-scope="text">
        {{ $t("meal_type_arr." + text)}}
      </template>
      <template slot="hotelName" slot-scope="text, record">
        <a @click="openHotel(record.hotelId)">{{ text }}</a>
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>

  </a-card>
</template>

<script>
import {getPublicData} from '@/services/public'
import {getOrderList} from '@/services/order'

export default {
  name: "OrderHotelList",
  i18n: require('../i18n'),
  data() {
    return {
      distributors: [],
      suppliers: [],
      countryList: [],
      orderHotelStatusArr: [],
      distributorStatusArr: [],
      supplierStatusArr: [],
      searchParams: {},
      searchForm: this.$form.createForm(this, {name: 'search'}),
      searchFormExpand: false,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      data: [],
      submitLoading: false,
      tableScroll: {  },
      columns: [
        {
          dataIndex: 'orderId',
          align: 'center',
          slotName: "order_id",
          slots: {title: 'order_id'},
          scopedSlots: {customRender: 'orderId'},
          width: 150,
          fixed: 'left',
        },
        {
          dataIndex: 'orderStatus',
          align: 'center',
          slotName: "order_status",
          slots: {title: 'order_status'},
          scopedSlots: {customRender: 'orderStatus'},
          width: 100,
          fixed: 'left',
        },
        {
          dataIndex: 'price',
          align: 'left',
          slotName: "selling_price",
          slots: {title: 'selling_price'},
          scopedSlots: {customRender: 'selling_price'},
        },
        {
          dataIndex: 'distributor',
          align: 'left',
          slotName: "distributor",
          slots: {title: 'distributor'},
          scopedSlots: {customRender: 'distributor'},
        },{
          dataIndex: 'distributorOrderId',
          align: 'left',
          slotName: "distributor_order_id",
          slots: {title: 'distributor_order_id'},
        },
        {
          dataIndex: 'distributorOrderStatus',
          align: 'center',
          slotName: "distributor_order_status",
          slots: {title: 'distributor_order_status'},
          scopedSlots: {customRender: 'distributorOrderStatus'},
        },{
          dataIndex: 'supplier',
          align: 'left',
          slotName: "supplier",
          slots: {title: 'supplier'},
        },{
          dataIndex: 'supplierOrderId',
          align: 'left',
          slotName: "supplier_order_id",
          slots: {title: 'supplier_order_id'},
        },
        {
          dataIndex: 'supplierOrderStatus',
          align: 'center',
          slotName: "supplier_order_status",
          slots: {title: 'supplier_order_status'},
          scopedSlots: {customRender: 'supplierOrderStatus'},
        },
        {
          dataIndex: 'supplierPrice',
          align: 'left',
          slotName: "supplier_price",
          slots: {title: 'supplier_price'},
          scopedSlots: {customRender: 'supplierPrice'},
        },
        {
          dataIndex: 'checkin',
          align: 'center',
          slotName: "checkin",
          slots: {title: 'checkin'},
        },
        {
          dataIndex: 'checkout',
          align: 'center',
          slotName: "checkout",
          slots: {title: 'checkout'},
        },
        {
          dataIndex: 'roomName',
          align: 'left',
          slotName: "room_name",
          slots: {title: 'room_name'},
          scopedSlots: {customRender: 'roomName'},
        },
        {
          dataIndex: 'mealType',
          align: 'center',
          slotName: "meal_type",
          slots: {title: 'meal_type'},
          scopedSlots: {customRender: 'mealType'},
        },
        {
          dataIndex: 'hotelName',
          align: 'left',
          slotName: "hotel_name",
          slots: {title: 'hotel_name'},
          scopedSlots: {customRender: 'hotelName'},
          ellipsis: true,
        },
        /*{
          dataIndex: 'hotelCountryName',
          align: 'left',
          slotName: "country",
          slots: {title: 'country'},
        },
        {
          dataIndex: 'hotelCityName',
          align: 'left',
          slotName: "city",
          slots: {title: 'city'},
        },*/
        {
          dataIndex: 'updatedTime',
          align: 'center',
          slotName: "updated_date",
          slots: {title: 'updated_date'},
          width: "5%",
        },
        {
          dataIndex: 'createdTime',
          align: 'center',
          slotName: "order_date",
          slots: {title: 'order_date'},
          width: 150,
          fixed: 'right',
        },
      ],
      visible: false,
    }
  },
  methods: {
    getData() {
      getPublicData('sup_dis_coun').then(res => {
        const {distributors, suppliers, countryList} = res.data
        this.distributors.push({label: this.$t('distributor'), value: ''})
        distributors.forEach(item => {
          this.distributors.push({label: item, value: item, text: item})
        })
        this.suppliers.push({label: this.$t('supplier'), value: ''})
        suppliers.forEach(item => {
          this.suppliers.push({label: item, value: item, text: item})
        })
        countryList.forEach(item => {
          this.countryList.push({label: item.countryNameEn, value: item.countryNameEn, text: item.countryNameEn})
        })
      }).catch(error => {
        console.log(error)
      })
    },
    fetchData(){
      this.loading = true
      getOrderList(this.pageIndex, this.pageSize, this.searchParams).then(res => {
        const {rows, total} = res.data.data
        this.data = rows
        this.total = total
        this.loading = false
        if(rows.length > 0)
          this.tableScroll = { x: 'max-content' }
        else
          this.tableScroll = { x: '' }
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      if (this.pageIndex === pagination.current && this.pageSize === pagination.pageSize)
        return

      this.pageIndex = pagination.current;
      this.pageSize = pagination.pageSize;
      this.fetchData()
    },
    handleSearch(e) {
      e.preventDefault();
      this.searchForm.validateFields((error, values) => {
        this.searchParams = Object.assign(this.searchParams, values)
      });
      this.pageIndex = 1
      this.fetchData()
    },
    handleReset() {
      this.searchForm.resetFields();
    },
    toggleSearchForm(){
      this.searchFormExpand = !this.searchFormExpand
    },
    openOrder(orderId){
      this.$openPage('/order/detail/' + orderId, "[" + orderId + "]")
    },
    openHotel(hotelId){
      this.$openPage('/hotel/detail/' + hotelId, "[" + hotelId + "]")
    },
    openDistributorHotel(distributor, hotelId){
      this.$openPage('/distributor/detail/' + distributor + '/' + hotelId, "[" + distributor + "][" + hotelId + "]")
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toUpperCase().indexOf(input.toUpperCase()) >= 0
      );
    },
    dateChange(date, dateArr) {
      this.searchParams.startDate = dateArr[0]
      this.searchParams.endDate = dateArr[1]
    },
    dateChange1(date, dateArr) {
      this.searchParams.startDate1 = dateArr[0]
      this.searchParams.endDate1 = dateArr[1]
    },
    dateChange2(date, dateArr) {
      this.searchParams.startDate2 = dateArr[0]
      this.searchParams.endDate2 = dateArr[1]
    },
    setColumn(){
    }
  },
  created() {
    this.getData()
    this.orderHotelStatusArr = [
      {label:this.$t("order_status"), value:''},
      {label:this.$t("order_status_arr.10"), value:10},
      {label:this.$t("order_status_arr.5"), value:5},
      {label:this.$t("order_status_arr.0"), value:0},
      {label:this.$t("order_status_arr.-10"), value:-10},
      {label:this.$t("order_status_arr.-20"), value:-20},
    ]
    this.distributorStatusArr = [
      {label:this.$t("distributor_order_status"), value:''},
      {label:this.$t("distributor_order_status_arr.10"), value:10},
      {label:this.$t("distributor_order_status_arr.5"), value:5},
      {label:this.$t("distributor_order_status_arr.-10"), value:-10},
      {label:this.$t("distributor_order_status_arr.-20"), value:-20},
    ]
    this.supplierStatusArr = [
      {label:this.$t("supplier_order_status"), value:''},
      {label:this.$t("order_status_arr.10"), value:10},
      {label:this.$t("order_status_arr.5"), value:5},
      {label:this.$t("order_status_arr.0"), value:0},
      {label:this.$t("order_status_arr.-10"), value:-10},
      {label:this.$t("order_status_arr.-20"), value:-20},
    ]
  },
}
</script>

<style scoped>
.ant-table-fixed-left,
.ant-table-fixed-right
{
  position: absolute;
  z-index: -1;
}
.ant-form-item{
  margin-bottom:5px;
}
</style>